<link rel="stylesheet" href="../css/main.css">

<!-- 模型一 -->
<div  class="layout">
  <section>
    <h2>功能记录</h2>
    <h3>a标签</h3>
    <p>为提升美观，去除默认下滑线。</p>
    <div class="context-box">
      <xmp>
        style="text-decoration:none;"
      </xmp>
    </div>

    <h3>html展示代码</h3>
    <p>html显示代码，网上很多说有code、pre、xmp经测试，xmp可用,显示位置受源码头空格数影响。以下为实例。<a href="https://blog.csdn.net/lb1135909273/article/details/99677447" target="_blank">博客</a>，<strong>但vue中不可用</strong>。</p>
    <div class="context-box">
      <xmp>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      </xmp>
    </div>

    <h3>菜单页左右联动</h3>
    <p>计划使用vue-router实现，但router对html支持很差，查询很多资料，最后决定使用原始的iframe加target，a标签中targe指定跳转对象名为context，iframe设置name属性context，完成关联，实例如下。</p>
    <div class="context-box">
      <xmp>
        <a href="./context/one.html"  class="a-noline" target="context" >详情页</a>
        <iframe src="./show.html" name="context" style="width: 100%;height: 100%;scrolling:no" frameborder="0"></iframe>
      </xmp>
    </div>
    
    
  </section>
</div>



